<template>
    <Layout title="采购列表" showHome showNew>
        <div class="pur-box">
            <nav>
                <van-dropdown-menu class="pur-select">
                    <van-dropdown-item v-model="query.state" :options="stateList">
                    </van-dropdown-item>
                </van-dropdown-menu>
                <input type="text" v-model="query.projectName" placeholder="输入项目名进行查询">
                <button class="btn" @click="searchEvt">查询</button>
            </nav>

            <article @scroll="scrollEvt">
                <div class="all-box" v-for="it in list" :key="it.id">
                    <van-swipe-cell class="van-swipe">

                        <template #left>
                            <van-button @click="detailsEvt" style="height: 100%;" square type="primary" text="详情" />
                        </template>
                        <div class="all-content">
                            <div class="title">

                                <span>{{ it.projectName }}</span>
                                <button style="border:1px solid palevioletred ">{{ it.state }}</button>

                            </div>
                            <div class="messages">
                                <div class="info">创建人:{{ it.createName }}</div>
                                <div class="info">创建日期:{{ it.createTime }}</div>
                                <div class="info">材料:{{ it.materialTime }}</div>
                            </div>

                        </div>

                    </van-swipe-cell>



                </div>
                <div class="loading-text" v-if="loading">
                    <van-loading />
                </div>
                <div class="loading-text" v-else :key="hasMore">
                    {{
        hasMore ? '上拉加载更多数据' : '没有更多数据'
                    }}
                </div>
            </article>

        </div>


    </Layout>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'

import { purchaseFlowApi, purchaseListApi } from '../../apis/purchaseApi'

const query = reactive({
    projectName: '',
    state: '',
    page: 1,
    size: 10
})
const list = ref([])
const loading = ref(true)
const hasMore = ref(true)
const stateList = [
    { text: '全部', value: '' }, //新建、确认、在途、完成、作废
    ...'新建、确认、在途、完成、作废'.split('、').map(it => ({ text: it, value: it }))
]



onMounted(function () {
    getPurchaseList()
})
async function getPurchaseList() {
    let result = await purchaseListApi(query)
    if (result.code === 200) {
        result.data.rows.forEach(it => {
            list.value.push({ ...it, createTime: (it.createTime || '').substring(0, 10) })
        })
    }
    setTimeout(function () {
        loading.value = false
    })
}

function scrollEvt(evt) {
    let isBottom = evt.target.scrollHeight < (evt.target.clientHeight + evt.target.scrollTop + 30)
    if (isBottom && !loading.value) {
        loading.value = true
        query.page += 1
        getList()
    }
}

// 查询
function searchEvt() {
    if (loading.value) return
    query.page = 1
    loading.value = true
    list = ref([])

    _this.ctx.$forceUpdate()

    getList()
}
// function editEvt() {
//     _router.push('/purchase/edit')
// }
// function detailsEvt() {
//     _router.push('/purchase/details')
// }


</script>
<style lang="less" scoped>
@import url('../../style/common.less');

.pur-box {
    display: block;
    position: relative;
    height: 100%;

    >.loading-text {
        display: block;
        text-align: center;
        color: @g05;
        font-size: .7rem;
        line-height: 36px;
    }

    >nav {
        display: flex;
        height: 48px;
        background: @g00;
        padding: 0 10px;
        margin-bottom: 10px;

        >input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 16px;
            padding-left: 10px;


        }

        >.btn {
            height: 30px;
            list-style: none;
            background: @b03;
            border: none;
            color: @g00;
            font-size: 14px;
            margin-top: 8px;
            line-height: 30px;
            text-align: center;
            border-radius: 3px;
        }
    }

    >article {
        >.all-box {
            background: @g00;
            overflow: hidden;
            border-radius: 5px;
            margin-top: 10px;
            width: 394px;
            height: 160px;
            border-bottom: 1px solid @g04;
            border-top: 1px solid @g04;


            >.van-swipe {
                >.van-swipe-cell__wrapper {

                    >.all-content {
                        margin: 15px;

                        >.title {
                            padding-bottom: 10px;
                            border-bottom: 1px solid @g05;
                            margin-bottom: 10px;

                            >span {
                                font-size: 20px;
                                padding-top: 10px;
                                padding-bottom: 10px;

                                font-weight: 800;
                            }

                            >button {
                                float: right;
                                list-style: none;
                                background: white;
                                border-radius: 5px;
                            }
                        }

                        >.messages {
                            color: @g05;
                            margin-top: 10px;

                            >.info {
                                color: @g06;
                            }
                        }


                    }
                }
            }
        }
    }
}
</style>
